<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .xntable {
            height: 600px;
            width: 100%;
        }

        .xntable1 table {
            height: 300px;
            width: 600px;
            table-layout: fixed;
            border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
            border-spacing: 0;
            font-weight: normal;
            height: 100%;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .xntable1 table th, .xntable1 table td {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="xntable">
    <div class="xntable-body-container">
        <table class="xntable-body">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>姓名</th>
                <th>姓名</th>
                <th>姓名</th>
                <th>姓名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>
            <tr>
                <td>姓名33</td>
                <td>姓名432</td>
                <td>姓名321</td>
                <td>姓名dsad</td>
            </tr>

            </tbody>
        </table>
    </div>
    <div class="xntable-head-container">
        <table class="xntable-head">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
                <col class="gap" width="17px">
            </colgroup>
            <thead>
            <tr>
                <th>姓名</th>
                <th>姓名</th>
                <th>姓名</th>
                <th>姓名</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</body>
<script type="module">
    import XnTable from './dist/xntable.min.js'

    let data = [

        {
            "data": 4378619043786190437861904378619043786190,
            "name": "<font color='#1144aa'>北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京</font>",
            "data1": 35790632,
            "percent": "0.817395439",
            "population": 21893095
        },
        {
            "data": 49741790,
            "name": "上海",
            "data1": 37216373,
            "percent": "0.748191269",
            "population": 24870895
        },
        {
            "data": 20162464,
            "name": "海南",
            "data1": 14307686,
            "percent": "0.709619915",
            "population": 10081232
        },
        {
            "data": 27732018,
            "name": "天津",
            "data1": 18486733,
            "percent": "0.666620546",
            "population": 13866009
        },
        {
            "data": 149220470,
            "name": "河北",
            "data1": 94763189,
            "percent": "0.635054888",
            "population": 74610235
        },
        {
            "data": 7296200,
            "name": "西藏",
            "data1": 4540137,
            "percent": "0.622260491",
            "population": 3648100
        },
        {
            "data": 252025020,
            "name": "广东",
            "data1": 144062950,
            "percent": "0.571621619",
            "population": 126012510
        },
        {
            "data": 63700176,
            "name": "黑龙江",
            "data1": 35077875,
            "percent": "0.550671555",
            "population": 31850088
        },
        {
            "data": 203054906,
            "name": "山东",
            "data1": 109952807,
            "percent": "0.541492984",
            "population": 101527453
        },
        {
            "data": 129135176,
            "name": "浙江",
            "data1": 68397249,
            "percent": "0.529656218",
            "population": 64567588
        },
        {
            "data": 94418554,
            "name": "云南",
            "data1": 49367673,
            "percent": "0.522859871",
            "population": 47209277
        },
        {
            "data": 79057998,
            "name": "陕西",
            "data1": 41136203,
            "percent": "0.520329429",
            "population": 39528999
        },
        {
            "data": 51704690,
            "name": "新疆",
            "data1": 26898326,
            "percent": "0.520229905",
            "population": 25852345
        },
        {
            "data": 115505114,
            "name": "湖北",
            "data1": 59631389,
            "percent": "0.516266223",
            "population": 57752557
        },
        {
            "data": 169496032,
            "name": "江苏",
            "data1": 87168512,
            "percent": "0.514280546",
            "population": 84748016
        },
        {
            "data": 64108318,
            "name": "重庆",
            "data1": 31876047,
            "percent": "0.497221702",
            "population": 32054159
        },
        {
            "data": 14405308,
            "name": "宁夏",
            "data1": 6858970,
            "percent": "0.476141849",
            "population": 7202654
        },
        {
            "data": 69831232,
            "name": "山西",
            "data1": 33128590,
            "percent": "0.474409358",
            "population": 34915616
        },
        {
            "data": 85182814,
            "name": "辽宁",
            "data1": 40175971,
            "percent": "0.471644092",
            "population": 42591407
        },
        {
            "data": 11847914,
            "name": "青海",
            "data1": 5575626,
            "percent": "0.470599803",
            "population": 5923957
        }
    ];
    let option = {
        "border": "normal",//border-bottom,no-border,normal
        "canResize": true,
        "animate": {
            open: false,
            sleepTime: 0,
            turnTime: 500,
            step: 0.1,
            canScroll: true,
            type: 'step',//step：按照每ms走几像素,time：一行走多久
        },
        "body": {
            overflow: 'hidden',//hidden,wrap
            textAlign: 'right',
            fontSize: '14',
            height: '40',
            showBorder: true,
            borderWidth: 1,
            borderColor: '#ffaaaa',
            background: ['#aaccaa', '#ccccbb', '#eeccee']
        },
        "head": {
            overflow: 'wrap',
            'textAlign': 'center',
            'fontSize': '14',
            'height': '50',
            'borderWidth': 1,
            'borderColor': '#11ccaa',
            'background': '#bbaaaa'
        },
        "columns": [
            {
                "name": "合并的",
                "children": [
                    {
                        "name": "data", "prop": "data", "minWidth": 80,"width": 100,
                        "body": {
                            overflow: 'wrap',
                            textAlign: 'left',
                            fontSize: '16',
                            // height:'40',
                            lineHeight: '40',
                            background: ['#11ccaa', '#11ccbb', '#ee11ee']
                        },
                        "head": {
                            overflow: 'wrap',
                            textAlign: 'center',
                            fontSize: '14',
                            lineHeight: '50'
                        }
                    },
                    {
                        "name": "name", "prop": "name","width": 100,  "body": {
                            overflow: 'hidden',
                            textAlign: 'center',
                            fontSize: '16',
                            // height:'40',
                            lineHeight: '40'
                        },
                    },
                ]
            },
            {
                "name": "data2", "prop": "data1", "width": 100, children: [
                    {
                        "name": "data1", "prop": "data1",  children: [
                            {"name": "data1", "prop": "data1", "width": 500}
                        ]
                    },
                    {
                        "width": 500,
                        "name": "percent", "prop": "percent",  children: []
                    }
                ]
            },
            // {"name": "percent", "prop": "percent", "width": 100},
            {"name": "population", "prop": "population", "width": 300},
        ],
        "on": {
            clickHead(res) {
                console.log(res);
            },
            clickBody(res) {
                console.log(res);
            },
            changeWidth(res) {
                console.log(res);
            }
        }
    };

    let xntable = new XnTable(document.querySelector('.xntable'), data, option)
</script>
</html>
